.vdr-container {
    position: absolute;
    box-sizing: border-box;
    background-color: #f8f8f8;
    z-index: 30;
    border-radius: 4px;
    border: none;
    overflow: hidden;
    box-shadow: 0 0 25px #2e2e2e1a;
}
.vdr-container.active {
    border: none;
    z-index: 101;
}
.vdr-container.dragging {
    border: none;
}
.drag-handle {
    box-sizing: border-box;
    position: absolute;
    background: #f0f0f0;
    opacity: 0;
    border: none !important;
    &:hover {
        background-color: #3d72dd49 !important;
        opacity: 1;
    }
}
.drag-handle-tl {
    top: -8px;
    left: -8px;
    cursor: nw-resize;
    z-index: 20;
    width: 16px;
    height: 16px;
}
.drag-handle-tm {
    top: -4px;
    left: 0;
    cursor: n-resize;
    width: 100%;
    height: 10px;
    left: 0;
    margin-left: 0;
}
.drag-handle-tr {
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    cursor: ne-resize;
}
.drag-handle-ml {
    left: -7px;
    height: 100%;
    top: 0;
    width: 14px;
    cursor: w-resize;
    margin-top: 0;
}
.drag-handle-mr {
    top: 0;
    margin-top: 0;
    right: 0;
    height: 100%;
    width: 7px;
    cursor: e-resize;
}
.drag-handle-bl {
    width: 16px;
    height: 16px;
    bottom: -4px;
    left: -4px;
    cursor: sw-resize;
    z-index: 20;
}
.drag-handle-bm {
    bottom:0;
    left: 0;
    margin-left: 0;
    height: 8px;
    cursor: s-resize;
    width: 100%;
}
.drag-handle-br {
    bottom: -4px;
    right: -4px;
    cursor: se-resize;
    width: 16px;
    height: 16px;
    z-index: 10;
}
